<template>
  <a-layout>
    <a-layout-content style="margin: 0 16px">
      <a-card style="margin: 16px 0; text-align:center">
        <!-- 搜索栏 -->
        <a-row>
          <a-col :span="15">
            <a-form-model-item :labelCol="{ span: 4, offset: 1 }" :wrapperCol="{ span: 14, offset: 1 }" label="服务名称：">
              <a-input :value="serviceName" v-model="searchKey" />
            </a-form-model-item>
          </a-col>
          <a-col :span="5">
            <a-form-model-item>
              <a-button type="primary" @click="search">搜索</a-button>
              <a-button type="primary" @click="reset">重置</a-button>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-button type="primary" class="editable-add-btn" @click="add()">
            添加
          </a-button>
        </a-row>
        <!-- 表格 -->
        <a-row>
          <a-table :columns="columns" :data-source="data" bordered :rowKey="(record, index) => index + 1">
            <template v-for="col in ['name']" :slot="col" slot-scope="text, record, index">
              <div>
                <a-input v-if="record.editing" style="margin: -5px 0" :value="text"
                  @change="e => handleChange(e.target.value, record.key, col)" />
                <template v-else>
                  {{ text }}
                </template>
              </div>
            </template>
            <template slot="operation" slot-scope="text, record, index">
              <div class="editable-row-operations">
                <span v-if="record.editing">
                  <a @click="() => save(record.key)">确定</a>
                  <a-popconfirm title="是否确定取消?" ok-text="确定" cancel-text="取消" @confirm="() => cancel(record.key)">
                    <a>取消</a>
                  </a-popconfirm>
                </span>
                <span v-else>
                  <a :disabled="editingKey !== ''" @click="() => edit(record.key)">编辑</a>
                  <a-popconfirm v-if="data.length" title="确定删除?" ok-text="确定" cancel-text="取消"
                    @confirm="() => delete_(record.key)">
                    <a href="javascript:;">删除</a>
                  </a-popconfirm>
                  <a :disabled="editingKey !== ''" @click="() => openDetail(record)">详细</a>
                </span>
              </div>
            </template>
          </a-table>
        </a-row>
      </a-card>
    </a-layout-content>
    <a-drawer width="300" placement="right" :closable="false" :visible="detailVisibale" @close="closeDetail()">
      <p class="drawer-title">
        详细信息
        <a-row type="flex">
          <a-col flex="100px">名称：</a-col>
          <a-col flex="auto">{{serviceName_inDetail}}</a-col>
        </a-row>
      </p>
    </a-drawer>
  </a-layout>
</template>
<script>
import { columns, data } from '@/views/configuration/service/data/configData.js'
export default {
  data() {
    return {
      /**
       * 服务名称
       */
       serviceName: '',
      /**
       * 搜索栏中的关键字
       */
      searchKey: '',
      /**
       * 表格的数据
       */
      data,
      cacheData: data.map(item => ({ ...item })),
      /**
       * 表格的列
       */
      columns,
      /**
       * 当前正在编辑的这条记录的key，如果为空字符串则表示此时没有记录处于被编辑状态
       */
      editingKey: '',
      /**
       * 详细信息是否可见
       */
      detailVisibale: false,
      /**
       * 服务名称，在详细信息弹出框中
       */
      serviceName_inDetail: '',

    };
  },
  methods: {
    /**
     * 搜索按钮
     */
    search() {
      console.debug(`搜索的内容为：${this.searchKey}`);
    },
    /**
     * 重置按钮
     */
    reset() {
      this.searchKey = '';
    },
    /**
     * 名称列内容变化时
     * @param {*} value 
     * @param {*} key 
     * @param {*} column 
     */
    handleChange(value, key, column) {
      const newData = [...this.data];
      const target = newData.find(item => key === item.key);
      if (target) {
        target[column] = value;
        this.data = newData;
      }
    },
    /**
     * 点击添加按钮
     */
    add() {
      const { data } = this;
      const newData = {
        key: 'fri-ua',
        name: '统一账号服务',
      };
      this.data = [newData, ...data];
    },
    /**
     * 编辑按钮
     * @param {*} key 
     */
    edit(key) {
      const newData = [...this.data];
      const target = newData.find(item => key === item.key);
      this.editingKey = key;
      if (target) {
        target.editing = true;
        this.data = newData;
      }
    },
    /**
     * 编辑按钮-->确定按钮
     * @param {*} key 
     */
    save(key) {
      const newData = [...this.data];
      const newCacheData = [...this.cacheData];
      const target = newData.find(item => key === item.key);
      const targetCache = newCacheData.find(item => key === item.key);
      if (target) {
        delete target.editing;
        this.data = newData;
        Object.assign(targetCache, target);
        this.cacheData = newCacheData;
      }
      this.editingKey = '';
    },
    /**
     * 弹出框的确定按钮
     * @param {*} key 
     */
    cancel(key) {
      const newData = [...this.data];
      const target = newData.find(item => key === item.key);
      this.editingKey = '';
      if (target) {
        Object.assign(target, this.cacheData.find(item => key === item.key));
        delete target.editing;
        this.data = newData;
      }
    },
    /**
     * 点击删除按钮，删除一条记录
     * @param {*} key 
     */
    delete_(key) {
      const dataSource = [...this.data];
      this.data = dataSource.filter(item => item.key !== key);
    },
    /**
     * 打开详细信息弹窗
     */
    openDetail(record) {
      this.detailVisibale = true;
      this.serviceName_inDetail = record.name;
    },
    /**
     * 关闭详细信息弹窗
     */
    closeDetail() {
      this.detailVisibale = false;
    }
  },
};
</script>
<style scoped>
.editable-row-operations a {
  margin-right: 8px;
}

.editable-add-btn {
  /* margin-bottom: 8px; */
  float: right;
}

p.drawer-title {
  font-size: 16px;
  color: rgba(0, 0, 0, 0.85);
  line-height: 24px;
  display: block;
  margin-bottom: 16px;
  margin-bottom: 24px;
}
</style>
